<template>
  <a-modal title="新增" v-model="show" :maskClosable="false" :width="1050" placement="right" :closable="true"
    @cancel="onClose" :footer="null" :visiable="infoAddVisiable">
    <a-form :form="form">
      <a-row>终端基础信息</a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="商户编码" v-bind="formItemLayout">
            <a-select show-search placeholder="请输入代码或名称" option-filter-prop="children" style="width: 334px"
              :filter-option="filterOption" @focus="selectMchntNo" @search="selectMchntNo" @change="handleChange"
              @select="selected" v-decorator="['mchntNo', { rules: [{ required: true, message: '必填字段' }] }]">
              <a-select-option v-for="(d, index) in suData" :key="index">
                {{ d.mchntNo }}-{{ d.mchntName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='终端打印商户名称' v-bind="formItemLayout">
            <a-input v-decorator="['termPrintMerName', { rules: [{ required: true, message: '必填字段' }] }]"
              :disabled="true" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="终端编号" v-bind="formItemLayout">
            <a-input v-decorator="['termNo']" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='收单机构代码' v-bind="formItemLayout">
            <a-input v-decorator="['posInstCd', { rules: [{ required: true, message: '必填字段' }] }]" :disabled="true" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="终端类型" v-bind="formItemLayout">
            <a-select mode="default" :allowClear="true" style="width: 100%" show-search placeholder="请选择"
              option-filter-prop="children" :filter-option="filterOption"
              v-decorator="['termType', { rules: [{ required: true, message: '请选择终端类型' }] }]">
              <a-select-option key="01">传统POS</a-select-option>
              <a-select-option key="02">有线拨号POS</a-select-option>
              <a-select-option key="03">电话POS</a-select-option>
              <a-select-option key="04">智能POS</a-select-option>
              <a-select-option key="05">mPOS</a-select-option>
              <a-select-option key="06">无线POS</a-select-option>
              <a-select-option key="07">mis终端</a-select-option>

            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="终端厂商" v-bind="formItemLayout">
            <a-select show-search placeholder="请输入代码或名称" option-filter-prop="children" style="width: 334px"
              :filter-option="filterOption" @focus="selectBrandCode" @search="selectBrandCode"
              v-decorator="['brandCode', { rules: [{ required: true, message: '必填字段' }] }]">
              <a-select-option v-for="(d, index) in brandCodeData" :key="d.id">
                {{ d.id }}-{{ d.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="终端型号" v-bind="formItemLayout">
            <a-select show-search placeholder="请输入代码或名称" option-filter-prop="children" style="width: 334px"
              :filter-option="filterOption" @focus="selectByBrandCode" @search="selectByBrandCode"
              v-decorator="['modelCode', { rules: [{ required: true, message: '必填字段' }] }]">
              <a-select-option v-for="(d, index) in modelCodeData" :key="d.id">
                {{ d.id }}-{{ d.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='维护开始时间' v-bind="formItemLayout">
            <a-date-picker placeholder="请选择日期" style="width: 334px" name="reconFileDate" v-decorator="['startTime']"
              format="YYYY-MM-DD HH:MM:SS.MS" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>终端承包商信息</a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="终端交易发起方式" v-bind="formItemLayout">
            <a-radio-group name="radioGroup" v-decorator="['termTxnStarWay']">
              <a-radio :value="'10'">现场消费</a-radio>
              <a-radio :value="'01'">自助支付</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="条码终端设备类型" v-bind="formItemLayout">
            <a-select mode="default" :allowClear="true" style="width: 100%" show-search placeholder="请选择"
              option-filter-prop="children" :filter-option="filterOption" v-decorator="['termDevcTp']">
              <a-select-option key="01">智能 POS</a-select-option>
              <a-select-option key="02">传统 POS (外接扫码/显码设备或内置扫码/显码模块)</a-select-option>
              <a-select-option key="03">收银机(外接扫码/显码设备或内置扫码/显码模块)</a-select-option>
              <a-select-option key="04">自助收银终端(支持扫码或显码功能)</a-select-option>
              <a-select-option key="05">智能移动设备（包含手机、PAD）</a-select-option>
              <a-select-option key="99">其他设备</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="24" :sm="24">
          <a-form-item label="布放实体店地域" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <a-row :span="24">
              <a-col :md="8" :sm="8">
                <a-select show-search placeholder="省" option-filter-prop="children" style="width: 260px"
                  :filter-option="filterOption" @focus="selectProvince"
                  v-decorator="['termAddrPrvnc', { rules: [{ required: true, message: '必填字段' }] }]">
                  <a-select-option v-for="d in provinceData" :key="d.id">
                    {{ d.id }}-{{ d.name }}
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item>
                  <a-select show-search placeholder="市" option-filter-prop="children" style="width: 260px"
                    :filter-option="filterOption" @focus="selectCity"
                    v-decorator="['termAddrCity', { rules: [{ required: true, message: '必填字段' }] }]">
                    <a-select-option v-for="(d, index) in cityData" :key="d.id">
                      {{ d.id }}-{{ d.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="8">
                <a-form-item>
                  <a-select show-search placeholder="区" option-filter-prop="children" style="width: 260px"
                    :filter-option="filterOption" @focus="selectArea"
                    v-decorator="['termAddrArea', { rules: [{ required: true, message: '必填字段' }] }]">
                    <a-select-option v-for="(d, index) in areaData" :key="d.id">
                      {{ d.id }}-{{ d.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form-item>

        </a-col>
      </a-row>
      <a-row>
      <a-col :md="12" :sm="24">
        <a-form-item label="布放实体店详细地址" v-bind="formItemLayout">
          <a-textarea allow-clear
            v-decorator="['shopAttr', { rules: [{ required: true, message: '布放实体店详细地址不能为空' }] }]" />
        </a-form-item>
      </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="布放实体店时间" v-bind="formItemLayout">
            <a-date-picker placeholder="请选择日期" style="width: 334px" name="reconFileDate"
              v-decorator="['shoptime', { rules: [{ required: true, message: '必填字段' }] }]" format="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="S/N" v-bind="formItemLayout">
            <a-select show-search placeholder="请选择sn" option-filter-prop="children" style="width: 334px"
              :filter-option="filterOption" @focus="selectBySN" @search="selectBySN"
              v-decorator="['sn', { rules: [{ required: true, message: '必填字段' }] }]">
              <a-select-option v-if="data != null" v-for="(d, index) in snData" :key="index">
                {{ d.id }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="终端联系人" v-bind="formItemLayout">
            <a-input v-decorator="['contactName']" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='终端联系电话' v-bind="formItemLayout">
            <a-input
              v-decorator="['contactPhone', { rules: [{ pattern: '^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$', message: '请输入正确的联系电话' }] }]" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="经度" v-bind="formItemLayout">
            <a-input v-decorator="['longitude', { rules: [{ required: true, message: '必填字段' }] }]" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='纬度' v-bind="formItemLayout">
            <a-input v-decorator="['latitude', { rules: [{ required: true, message: '必填字段' }] }]" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="有效半径(单位：千米)" v-bind="formItemLayout">
            <a-input v-decorator="['effectiveRadius', { rules: [{ required: true, message: '必填字段' }] }]" />
          </a-form-item>
        </a-col>
      </a-row>
      <br>

    </a-form>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-modal>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 }
}
export default {
  name: 'InfoAdd',
  props: {
    infoAddVisiable: {
      default: false
    },
    instId: '',
  },
  data() {
    return {
      data: [],
      suData: [],
      brandCodeData: [],
      modelCodeData: [],
      provinceData: [],
      cityData: [],
      areaData: [],
      snData: [],
      loading: false,
      formItemLayout,
      form: this.$form.createForm(this),
      validateStatus: '',
      // firstValue: {},
      info: {
        infoName: '',
        remark: '',
        menuId: ''
      }
    }
  },
  computed: {
    show: {
      get: function () {
        return this.infoAddVisiable
      },
      set: function () {
      }
    }
  },
  mounted() {

  },

  methods: {
    getMoment(value) {
      return this.$moment(value).format('YYYY-MM-DD HH:MM:SS.MS')
    },

    selectMchntNo(val) {
      this.suData = []
      let param = {}
      if (val) {
        param = {
          q: encodeURIComponent(val + `&${this.instId}`),
          pageSize: 20
        }
      } else {
        param = {
          q: encodeURIComponent(`&${this.instId}`),
          pageSize: 20
        }
      }

      this.$get('admin/mcmp/bMchntBaseInfo/mchntFormalSelect2List', param).then((r) => {
        let result = r.data.rows
        result.forEach(r => {
          this.suData.push(r);
        })
      })

    },
    selected(val) {
      // console.log('標號',val)
      this.form.setFieldsValue({
        mchntNo: this.suData[val].mchntNo,
      })
    },
    handleChange(value) {
      this.form.setFieldsValue({
        // mchntNo: this.suData[value].mchntNo,
        termPrintMerName: this.suData[value].mchntName,
        posInstCd: this.suData[value].signInstId
      })
    },

    selectBrandCode(val) {
      this.brandCodeData = []
      let param = {}
      if (val) {
        param = {
          q: encodeURIComponent(val + `&${this.instId}`),
          pageSize: 20
        }
      } else {
        param = {
          q: encodeURIComponent(`&${this.instId}`),
          pageSize: 20
        }
      }
      this.$get('terminalAdmin/termbrandSelect2List', param).then((r) => {
        let result = r.data.results
        result.forEach(r => {
          this.brandCodeData.push(r);
        })
      })
    },

    selectByBrandCode(val) {
      this.modelCodeData = []
      let brandCode = this.form.getFieldsValue(['brandCode'])
      if (brandCode.brandCode) {
        let param = {}
        if (val) {
          param = {
            q: encodeURIComponent(val + `&${brandCode.brandCode}` + `&${this.instId}`),
            pageSize: 20
          }
        } else {
          param = {
            q: encodeURIComponent(`&${brandCode.brandCode}` + `&${this.instId}`),
            pageSize: 20
          }
        }
        this.$get('modelAdmin/termmodelSelect2List', param).then((r) => {
          let result = r.data.results
          result.forEach(r => {
            this.modelCodeData.push(r);
          })
        })

      } else {
        this.$message.warning('请先选择终端产商')
      }
    },

    selectProvince() {
      this.provinceData = []
      this.cityData = []
      this.form.setFieldsValue({
        termAddrPrvnc: '',
        termAddrCity: '',
        termAddrArea: ''
      })
      this.areaData = []
      let l = '01'
      this.$get('/admin/merParam/regionInfo/select2', { l: l }).then((r) => {
        let result = r.data
        result.forEach(r => {
          this.provinceData.push(r);
        })
      })
    },
    selectCity() {
      this.cityData = []
      this.areaData = []
      this.form.setFieldsValue({
        termAddrCity: '',
        termAddrArea: ''
      })
      let termAddrPrvnc = this.form.getFieldsValue(['termAddrPrvnc'])
      if (termAddrPrvnc.termAddrPrvnc) {
        let l = '02'
        let p = termAddrPrvnc.termAddrPrvnc
        this.$get('/admin/merParam/regionInfo/select2', { l: l, p: p }).then((r) => {
          let result = r.data
          result.forEach(r => {
            this.cityData.push(r);
          })
        })
      }
    },
    selectArea() {
      this.areaData = []
      let termAddrCity = this.form.getFieldsValue(['termAddrCity'])
      if (termAddrCity.termAddrCity) {
        let l = '03'
        let p = termAddrCity.termAddrCity
        this.$get('/admin/merParam/regionInfo/select2', { l: l, p: p }).then((r) => {
          let result = r.data
          result.forEach(r => {
            this.areaData.push(r);
          })
        })
      }
    },

    selectBySN(val) {
      this.snData = []
      let param = {}
      if (val) {
        param = {
          q: encodeURIComponent(val + `&${this.instId}`),
          pageSize: 20
        }
      } else {
        param = {
          q: encodeURIComponent(`&${this.instId}`),
          pageSize: 20
        }
      }
      this.$get('info/snSelect2List', param).then((r) => {
        let result = r.data.results
        result.forEach(r => {
          this.snData.push(r);
        })
      })
    },

    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },

    reset() {
      this.loading = false
      this.form.resetFields()
    },
    onClose() {
      this.reset()
      this.$emit('close')
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.setInfoFields()
          this.loading = true
          this.info.instId = this.instId
          this.info.optFlag = 'add'
          let startTime = this.info.startTime
          if (startTime) {
            this.info.startTime = this.getMoment(this.info.startTime)
          }
          this.info.shoptime = this.getMoment(this.info.shoptime)
          // console.log(this.info)
          this.$post('info', {
            ...this.info
          }).then((r) => {
            this.reset()
            this.$emit('success')
          }).catch(() => {
            this.loading = false
          })
        }
      })

    },

    setInfoFields() {
      let values = this.form.getFieldsValue(['mchntNo', 'termPrintMerName', 'termNo', 'posInstCd', 'termType',
        'brandCode', 'modelCode', 'startTime', 'radioGroup', 'termDevcTp', 'termAddrPrvnc', 'termAddrCity',
        'termAddrArea', 'termTxnStarWay', 'shopAttr', 'shoptime', 'sn', 'shopAttr', 'contactName',
        'contactPhone', 'longitude', 'latitude', 'effectiveRadius'])
      if (typeof values !== 'undefined') {
        Object.keys(values).forEach(_key => {
          this.info[_key] = values[_key]
        })
      }
    }
  }
  ,

}
</script>
